<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>码客山威 - 专区管理</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/bootstrap-table.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/fileinput.min.css" rel="stylesheet">
<link href="css/fileinput.min.css" rel="stylesheet">
<style type="text/css">
	.green {
		background: rgb(50,197,210);
		color:white;
		margin-right: 5px;
	}

	.blue {
		background: rgb(53,152,220);
		color:white;
		margin-right: 5px;
	}

	.red {
		background: rgb(231,80,90);
		color:white;
		margin-right: 5px;
	}

	#mytable td{
		vertical-align:middle;
	}
</style>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

</head>

<body>	
	<div class="col-sm-12">		
		<div class="row">
			<ol class="breadcrumb">
				<li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
				<li class="active">专区管理</li>

			</ol>
		</div><!--/.row-->
		
		<div class="row">
			<div class="col-lg-12">
				<h3 class="page-header">专区管理</h3>
			</div>
		</div><!--/.row-->
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-success">
					<div class="panel-heading">新增专区</div>
					<div class="panel-body">
						<form id="form" method="post">
		                  <div class="form-horizontal">
		                    <div class="form-group">
		                      <label class="col-sm-1 control-label">板块名称</label>
		                      <div class="col-sm-2">
		                        <select class="form-control" name="category" placeholder="板块名称" onchange="getSpecialBlock()"></select>
		                      </div>
		                      <label class="col-sm-1 control-label">专区名称</label>
		                      <div class="col-sm-6">
		                        <input type="text" class="form-control" name="name" placeholder="专区名称">
		                      </div>
		                      
		                    </div>
		                     <div class="form-group">
		                      <label class="col-sm-1 control-label">专区描述</label>
		                      <div class="col-sm-6">
		                      	<textarea class="form-control" name="description" placeholder="什么也没有留下"></textarea>
		                      </div>
		                    </div>
		                    <div class="form-group">
		                      <label class="col-sm-1 control-label">图片筛选</label>
		                      <div class="col-sm-10">
		                        <input type="file" name="file" id="image_file" multiple class="file-loading" />
		                      </div>
		                    </div>
		                    <div class="form-group">
		                      <div class="col-sm-1 col-sm-offset-1">
		                        <a href="javascript:addNewSpecial()" id="catebtn" class="btn btn-sm btn-danger" disabled="true">新增专区</a>
		                      </div>
		                    </div>
		                   
		               
		                  </div>
		                </form>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">码客山威专区列表</div>
					<div class="panel-body">
						<table id="mytable">
						    
						</table>
					</div>
				</div>
			</div>
			
			
		</div><!--/.row-->
	</div>	<!--/.main-->
		  

	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/bootstrap-table.js"></script>
	<script src="js/jquery.base64.js"></script>
	<script type="text/javascript">

		var tableInit = function(){
			
		}
		function getSpecialBlock(){
			var id = $("select[name='category']").val();
			$.ajax({
				url:'https://www.maksdu.com/app/category/get',
				type: 'get',
				data: {
					categoryid:id
				},
				success: function(datalist) {
					datalist = datalist.result.value;
					$('#mytable').bootstrapTable('destroy').bootstrapTable({
						data:datalist.types,
					    toolbar: '#toobar',//工具列
					    striped: true,//隔行换色
					    cache: false,//禁用缓存
					    pagination: true,//启动分页
					    sidePagination: 'client',//分页方式
					    pageNumber: 1,//初始化table时显示的页码
					    pageSize: 10,//每页的记录行数（*）
					    showFooter: false,//是否显示列脚
					    showPaginationSwitch: true,//是否显示 数据条数选择框
					    sortable: true,//排序
					    search: true,//启用搜索
					    showColumns: true,//是否显示 内容列下拉框
					    showRefresh: true,//显示刷新按钮
					    idField: 'SystemCode',//key值栏位
					    clickToSelect: true,//点击选中checkbox
					    singleSelect: true,//启用单行选中
					   
					    queryParams : function (params) {
				            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

				            var temp = {   
				                rows: params.limit,                         //页面大小
				                page: (params.offset / params.limit) + 1,   //页码
				                sort: params.sort,      //排序列名  
				                sortOrder: params.order //排位命令（desc，asc） 
				            };
				            return temp;
				        },
						columns:[
						{
							field: 'SerialNumber',
						    title: '序号',
						    formatter: function (value, row, index) {
						        return index+1;
						    }
						},
						{
							filed: 'icon',
							title: 'logo',
							width: '70',
							formatter: function (value, row, index) {
								if(!row.icon) {
									return "未上传";
								} else {
									return "<img width='70px' height='70px' src='"+row.icon+"'/>"
								}
						    }

						},
						{
							field: 'name',
							title: '专区名称',
						},
						{
							field: 'description',
							title: '专区描述'
						},
						{
							filed: 'enable',
							title: '启用状态',
							formatter: function (value, row, index) {
								if(row.enable) {
									return "<span style='color:green'>启用</span>";
								}
						        return "<span style='color:red'>未启用</span>";
						    }

						},
						{
							field: 'createTime',
							title: '创建时间',
						},
						{
							field: 'handle',
							title: '操作',
							sortable: true,
							formatter: actionFormatter
						}
					]
				});
				}

			});
	    }
		!function ($) {
		    $(document).on("click","ul.nav li.parent > a > span.icon", function(){          
		        $(this).find('em:first').toggleClass("glyphicon-minus");      
		    }); 
		    $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
		}(window.jQuery);

		$(window).on('resize', function () {
		  if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
		})
		$(window).on('resize', function () {
		  if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
		})

		//操作栏的格式化
        function actionFormatter(value, row, index) {
            var id = row.id;
            var result = "";
            result += "<a href='javascript:deleteSpecial(" + id + ")' class='btn btn-xs red' title='删除'><span class='glyphicon glyphicon-remove'></span></a>";

            return result;
        }
	</script>
	<script src="js/special-data.js"></script>
	 <script src="js/fileinput.min.js"></script>
  <script src="js/zh.js"></script>
  
  <script type="text/javascript">
    $(function () {
    //0.初始化fileinput
        var oFileInput = new FileInput();
        oFileInput.Init("image_file", "https://www.maksdu.com/app/upload/icon");
    });

    //初始化fileinput
    var FileInput = function () {
        var oFile = new Object();

        //初始化fileinput控件（第一次初始化）
        oFile.Init = function(ctrlName, uploadUrl) {
            var control = $('#' + ctrlName);

            //初始化上传控件的样式
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: uploadUrl, //上传的地址
                allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
                showUpload: true, //是否显示上传按钮
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式     
                dropZoneEnabled: false,//是否显示拖拽区域
                minImageWidth: 50, //图片的最小宽度
                minImageHeight: 50,//图片的最小高度
                maxImageWidth: 700,//图片的最大宽度
                maxImageHeight: 700,//图片的最大高度
                maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                minFileCount: 0,
                maxFileCount: 1, //表示允许同时上传的最大文件个数
                enctype: 'multipart/form-data',
                validateInitialCount:true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            });

            //导入文件上传完成之后的事件
            $("#image_file").on("fileuploaded", function (event, data, previewId, index) {
               $("#catebtn").removeAttr("disabled");
               setTemp(data.response.result);
            });
        }
        return oFile;
    };
  </script>
</body>

</html>
